<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <topLogo/>
    </div>
    <div class="top-bar__right">

      <topMenu/>
      <el-tooltip v-if="showColor"
                  effect="dark"
                  :content="$t('navbar.color')"
                  placement="bottom">
        <div class="top-bar__item">
          <top-color></top-color>
        </div>
      </el-tooltip>
      <el-tooltip v-if="showTheme"
                  effect="dark"
                  :content="$t('navbar.theme')"
                  placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-theme></top-theme>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark"
                  :content="$t('navbar.notice')"
                  placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-notice></top-notice>
        </div>
      </el-tooltip>
      <img class="top-bar__img"
           :src="userInfo.avatar">
      <span>{{userInfo.userName}}</span>
      <el-dropdown>
        <span class="el-dropdown-link">
          {{userInfo.userName}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <router-link to="/">{{$t('navbar.dashboard')}}</router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link>
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout"
                            divided>{{$t('navbar.logOut')}}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
    import {resetRouter} from '@/router/router'
    import {mapGetters, mapState} from "vuex";

    import topNotice from './top-notice'
    import topLogo from "./top-logo";
    import topMenu from "./top-menu";
    import topTheme from "./top-theme";
    import topColor from "./top-color";

    export default {
        components: {
            topMenu,
            topNotice,
            topLogo,
            topTheme,
            topColor
        },
        name: "topNavbar",
        data() {
            return {
            };
        },
        filters: {},
        created() {
        },
        mounted() {
        },
        computed: {
            ...mapState({
                showDebug: state => state.common.showDebug,
                showTheme: state => state.common.showTheme,
                showColor: state => state.common.showColor
            }),
            ...mapGetters([
                "userInfo",
                "topNavIndex"
            ])
        },
        methods: {
            handleSelect() {

            },
            logout() {
                this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
                    confirmButtonText: this.$t("submitText"),
                    cancelButtonText: this.$t("cancelText"),
                    type: "warning"
                }).then(() => {
                    this.$store.dispatch("LogOut").then(() => {
                        resetRouter();
                        this.$router.push({path: "/login"});
                    });
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
</style>
